<template>
  <!-- 只能有一个根标签 -->
  <div>
    <h1>{{message}}</h1>
    <!-- 跳转方式1：超链接 -->
    <router-link to="/page1?username=张三">超链接跳转页面1</router-link>
    <br>
    <router-link to="/page2?username=王五">超链接跳转页面2</router-link>
    <br>
    <button @click="jumpToPage1">JS跳转页面1</button>
    <br>
    <button @click="jumpToPage2">Js跳转页面2</button>
    <br>
    <router-link to="/student">学生页面</router-link>
    <br>
    <router-link to="/teacher">老师页面</router-link>
    <br>
    <router-link to="/grade">成绩面</router-link>
    <br>
    <router-link to="/course">课程页面</router-link>
    <!--    路由视图，挂载子页面-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){         //定义数据
    return {
      message:'Hello Vue-Cli!!!'
    }
  },
  methods:{
    jumpToPage1(){
      //跳转方式2：JS代码跳转
      this.$router.push({path:'/page1',query:{username:'李四'}})
    },
    jumpToPage2(){
      this.$router.push({path:'/page2',query:{username: '赵六'}})
    }
  }
}
</script>

<style scoped>

</style>